<template>
  <div class="operateUser">
    <div class="head">
      管理员管理》用户管理》{{type}}
    </div>
    <div class="formContent">
      <el-form :label-position="labelPosition" label-width="20%" :model="formLabelAlign">
        <el-form-item label="账号名">
          <el-input v-model="formLabelAlign.loginName"></el-input>
          <el-button class="goManageProduct" @click="goBackManageProduct">返回</el-button>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="formLabelAlign.userName"></el-input>
        </el-form-item>
        <el-form-item label="输入密码">
          <el-input v-model="formLabelAlign.password" show-password></el-input>
        </el-form-item>
        <el-form-item label="重复密码">
          <el-input v-model="formLabelAlign.repeatPwd" show-password></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="formLabelAlign.roleId" placeholder="请选择" @visible-change='getAllRoleSelect'>
            <el-option v-for="item in formLabelAlign.roleOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div>
        <el-button class="submitBtn" @click="addAccount">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'operateUser',
  data () {
    return {
      type:'',//操作类型
      id:"",//编辑时行id
      labelPosition: 'left',
      formLabelAlign: {//表单数据
          loginName: '',
          userName: '',
          password:'',
          repeatPwd:'',
          roleId:'',
          roleOptions: [],
        },
      // btnText:'',//按钮文字
      
    }
  },
  mounted(){
    let _this = this;
    _this.type = _this.$route.params.type == 'add'?'新增':'编辑';
    _this.id = _this.$route.params.id ;
    if(_this.id > -1){
      _this.initAccount();//编辑初始化信息
    }
    _this.getAllRoleSelect(true);//获取所有角色下拉框
    // _this.btnText = _this.$route.params.type == 'add'?'+':'更换';
  },
  methods:{
    //返回产品管理
    goBackManageProduct(){
      let _this = this;
      _this.$router.push({
        path:'/manageUsers'
      });
    },
    //操作产品：新增或编辑
    addAccount(){
      let _this = this;
      if(_this.formLabelAlign.loginName == ''){
        _this.$message('请先填写账号');
        return
      }
      if(_this.formLabelAlign.userName == ''){
        _this.$message('请先填写用户名');
        return
      }
      if(_this.formLabelAlign.password == ''){
        _this.$message('请先填写密码');
        return
      }
      if(_this.formLabelAlign.password != _this.formLabelAlign.repeatPwd){
        _this.$message('两次密码不一致，请重新输入');
        return
      }
      if(_this.formLabelAlign.roleId == ''){
        _this.$message('请先选择角色');
        return
      }
      let api = '';
      let data = '';//传参
      let sessionId = _this.$store.state.id;//获取token
      if(_this.type == '新增'){
        api = '/api/admin/manager/insert';
        data ={
            //  "avatorKey": "",
              "loginName": _this.formLabelAlign.loginName,
              "password": _this.formLabelAlign.password,
              "roleId": _this.formLabelAlign.roleId,
              "userName": _this.formLabelAlign.userName,
          }
        
      }else{//编辑
        api = '/api/admin/manager/update';
        data = {
            // "avatorKey": "avator.png",
            "id": _this.id,
            "loginName": _this.formLabelAlign.loginName,
            "password": _this.formLabelAlign.password,
            "userName": _this.formLabelAlign.userName,
            "roleId": _this.formLabelAlign.roleId,
            // "roleId": _this.formLabelAlign.roleId,
        };
      }
      _this.axios.post(api,data
      ,{
        headers:{
          sessionId
        }
      }
      ).then(res=>{
        //console.log('操作账号',res);
        if(res.data.code == 401){
          _this.$message({
            type: 'info',
            message: '登录已失效，请重新登录'
          });  
          _this.$router.push({
            path:"/"
          });
          return
        }
        
        if(res.data.code == 200){
          _this.$message({
            type: 'success',
            message: _this.type+'成功！'
          }); 
          _this.$router.push({
            path:"/manageUsers"
          });
        }
      });
    },
    //编辑信息时初始化时获取信息详情
    initAccount(){
      let _this = this;
      let api = '/api/admin/manager/find_detail?id='+_this.id;
      let sessionId = _this.$store.state.id;//获取token
      _this.axios({
            url:api,
            method: 'post',
            headers:{
              sessionId,
            }		
  			}).then(res=>{
        //console.log('编辑初始化账号信息',res);
        if(res.data.code == 401){
            _this.$message({
              type: 'info',
              message: '登录已失效，请重新登录'
            });  
            _this.$router.push({
              path:"/"
            });
            return
          }
        if(res.data.code == 200){
          _this.formLabelAlign = res.data.data.bussData;
          _this.formLabelAlign.roleOptions = _this.$store.state.role;
          console.log(_this.formLabelAlign,'_this.formLabelAlign');
          // _this.formLabelAlign.url = require('../assets/img/logo.png');//上传文件前面的图片路径，设置默认路径
          // _this.formLabelAlign.classLevel1Options = _this.$store.state.classOneOptions;//获取所有第一分类
          // _this.formLabelAlign.classLevel2Options = _this.$store.state.classTwoOptions;//获取所有二级分类
        }
      });
    },
    //获取所有角色
    getAllRoleSelect(isShow){
      let _this = this;
      //console.log(isShow,'下拉框是否出现');
      if(!isShow){
        return
      }
      let api = '/api/admin/role/find_list';
      let role = [];//清空
      let sessionId = _this.$store.state.id;//获取token 
      _this.axios({
            url:api,
            method: 'post',
            headers:{
              sessionId,
            }		
  			}).then(res=>{
        //console.log('所有的角色可能值',res);
        let class2 = res.data.data.bussData;
        class2.forEach(item=>{
          let obj = {};
          obj.value = item.id;
          obj.label = item.roleName;
          role.push(obj);
        });
        role = role.filter(item=>{
          return item.label != '全部'
        });
        _this.$store.dispatch('saveRole',role);//缓存所有二级分类
        _this.formLabelAlign.roleOptions = _this.$store.state.role;//获取所有角色
        let obj = {
          value:"",
          label:"全部",
        }

        _this.formLabelAlign.roleOptions.unshift(obj);
        //console.log('role',role,_this.$store.state.role);

      });
    },
  }
}
</script>

<style scoped>
/* 整体样式 */
.operateUser{
  height: 94%;
  width: 94%;
  border: .0625rem solid rgba(187, 187, 187, 1);
  margin: 0 auto;
  position: relative;
  padding: 1%;
  font-size: .875rem;
  color:rgba(16, 16, 16, 1) !important;

}
/* 按钮 */
.operateUser>>>button{
  color:rgba(16, 16, 16, 1) !important;
}
/* 表单 */
.operateUser>>>.formContent{
  width: 80%;
  margin: 0 auto;
  position: absolute;
  top: 15%;
  left: 15%;
}
/* 输入框 */
.operateUser>>>.formContent .el-input,.formContent .el-select{
  width: 30%;
} 
.operateUser>>>.formContent .el-select .el-input{
  width: 100%;
}
/* 返回按钮 */
.operateUser>>>.goManageProduct{
  position: absolute;
  top: 0%;
  left: 74%;
}
/* 选择框 */
.operateUser>>>.el-form-item__content>label{
  display: block;
}
/* 提交表单按钮 */
.operateUser>>>.submitBtn{
  position: absolute;
  bottom: -23%;
  left: 32%;
}

</style>
